import React, { useState, useEffect } from "react";
import AntSelect from "../../../components/order/AntSelect";
import AntDatePicker from "../../../components/order/AntDatePicker";
import AntInput from "../../../components/order/AntInput";
import AntBtn from "../../../components/order/AntBtn";
import AntTable from "../../../components/order/AntTable";
import { AntDelBtnModal } from "../../../components/order/AntModal";
import onExportBasicExcel from "../../../utils/ExportTable";
import axios from "axios";
import styles from "./deliver.module.css";

const Index = () => {
  // 储存批量操作的已勾选选项
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 送货状态选择数据
  const deliverState = [
    {
      value: "deliver-all",
      label: "全部",
    },
    {
      value: "deliver-wait",
      label: "待发货",
    },
    {
      value: "deliver-paied",
      label: "已发货",
    },
    {
      value: "deliver-done",
      label: "已完成",
    },
  ];

  // 表格批量操作选项
  const tableMultOperationSelectOption = [
    {
      value: "setAllPaied",
      label: "设为已付款",
    },
    {
      value: "setAllDelivered",
      label: "设为已发货",
    },
    {
      value: "setAllFollow",
      label: "批量跟进",
    },
    {
      value: "setAllWork",
      label: "批量工单",
    },
    {
      value: "setAllDel",
      label: "批量删除",
    },
  ];

  // 表格头
  const tableColumns = [
    {
      title: "发货单号",
      dataIndex: "OrderNum",
      key: "OrderNum",
    },
    {
      title: "订单编号",
      dataIndex: "OrderCustmerName",
      key: "OrderCustmerName",
    },
    {
      title: "发货数量",
      dataIndex: "OrderPrice",
      key: "OrderPrice",
    },
    {
      title: "物流公司",
      dataIndex: "OrderCount",
      key: "OrderCount",
    },
    {
      title: "物流单号",
      dataIndex: "OrderPayState",
      key: "OrderPayState",
    },
    {
      title: "发货状态",
      dataIndex: "OrderDeliverState",
      key: "OrderDeliverState",
    },
    {
      title: "发货时间",
      dataIndex: "OrderCreateTime",
      key: "OrderCreateTime",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            <AntDelBtnModal id={record} fn={delData}></AntDelBtnModal>
          </>
        );
      },
    },
  ];

  // 表格数据
  let [tableData, setTableData] = useState([]);

  // 表格所有数据
  let [allData, setAllData] = useState([]);

  // 页面加载axios请求 表格数据
  function initTableDataReq() {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/getallorderlist",
      params: {
        currentPage: "1",
      },
      method: "POST",
    })
      .then((res) => {
        setAllData(res.data.alldata);
        setTableData(res.data.data);
        setTableDataTotal(res.data.total);
      })
      .catch((err) => console.error(err));
  }

  // 数据页面改变时axios请求
  function tableDataReq(value) {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/getallorderlist",
      params: {
        currentPage: value,
      },
      method: "POST",
    })
      .then((res) => setTableData(res.data.data))
      .catch((err) => console.error(err));
  }

  // 加载时请求表格数据
  useEffect(() => {
    initTableDataReq();
  }, []);

  // 发货状态Select方法
  const onSelect2 = (values) => {
    setSelect2(values);
  };

  // 日期选择确定
  const TimeOk = (value) => {
    setTimeSelect(value._d);
  };

  // 客户名称/订单号确定
  const InputOnChange = (value) => {
    setIpt(value.target.value);
  };

  // 重置
  const reset = () => {
    setSelect2("deliver-all");
    setTimeSelect("全部");
    setIpt("");
    initTableDataReq();
  };

  // 搜索
  const search = () => {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/searchorder",
      params: {
        deliverState: Select2,
        CustumerName: ipt
      },
      method: "POST",
    })
      .then((res) => {
        setAllData(res.data.data);
        setTableData(res.data.data);
        setTableDataTotal(res.data.total);
      })
      .catch((err) => console.error(err));
  };

  // 删除操作
  const delData = (num) => {
    console.log(num)
    // 发送删除请求
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/del",
      params: {
        OrderNum: num
      },
      method: "POST",
    })
      .then((res) => {
        console.log(res)
        setAllData(res.data.alldata);
        setTableData(res.data.data);
        setTableDataTotal(res.data.total);
      })
      .catch((err) => console.error(err));
  }

  // 导入

  const [Select2, setSelect2] = useState("deliver-all");
  const [TimeSelect, setTimeSelect] = useState("全部");
  const [ipt, setIpt] = useState("");
  const [tableDataTotal, setTableDataTotal] = useState(0);

  return (
    <div>
      <div className={styles.PageTitle}>
        <div className={styles.PageTitle_left}>发货单</div>
        <div className={styles.PageTitle_right}>
          <AntBtn BtnType="primary" fn={() => { onExportBasicExcel(tableColumns, allData, "订单列表"); }}>
            导出
          </AntBtn>
        </div>
      </div>
      <div className={styles.SearchForm}>
        <div className={styles.SearchForm_left}>
          <AntSelect title="发货状态" data={deliverState} onSelect={onSelect2} defaultValue="deliver-all" value={Select2}></AntSelect>
          <AntDatePicker TimeOk={TimeOk} title="日期选择" currentTime={TimeSelect} value={TimeSelect}></AntDatePicker>
          <AntInput placeholder="客户名称/订单号" InputOnChange={InputOnChange} value={ipt}  ></AntInput>
          <AntBtn fn={reset}>重置</AntBtn>
          <AntBtn fn={search}>搜索</AntBtn>
        </div>
        <div className={styles.SearchForm_right}>

        </div>
      </div>
      <div className={styles.table}>
        <AntTable multSelect={selectedRowKeys} multSelectChange={setSelectedRowKeys} tableColumns={tableColumns} tableData={tableData} tableMultOperationSelectOption={tableMultOperationSelectOption} tableDataReq={tableDataReq} tableDataTotal={tableDataTotal}></AntTable>
      </div>
      {/* <button onClick={goDetail}>跳转订单详情</button> */}
    </div>
  );
};

export default Index;
